<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.nav a {
			text-decoration: none;
			display: inline-block;
			text-align: center;
			width: 120px;
			height: 58px;
			line-height: 58px;
			color: #000;
		}

		.bg1 {
			background-color: chartreuse;
		}

		.bg1:hover {
			background-color: #fff;
		}

		.bg2 {
			background-color: yellowgreen;
		}

		.bg3 {
			background-color: aqua;
		}

		.bg4 {
			background-color: yellow;
		}

		.bg5 {
			background-color: tomato;
		}
	</style>
</head>

<body>
	<div class="nav">
		<a href="#" class="bg1">五彩导航1</a>
		<a href="#" class="bg2">五彩导航2</a>
		<a href="#" class="bg3">五彩导航3</a>
		<a href="#" class="bg4">五彩导航4</a>
		<a href="#" class="bg5">五彩导航5</a>
	</div>
</body>

</html>